<template>
  <!-- 登录 -->
  <view class="content bg-white">
    <view class="form">
      <view class="title flex-y flex-x-center flex-y-center main-theme-color"><view class="fz44 bold">重置密码</view></view>
      <form @submit="formSubmit">
        <view class="ct">
          <view class="item pr" style="display: none;">
            <sw-icons class="icons" icon="icon-yonghu" size="50" color="#008afe"></sw-icons>
            <input v-model="state.formData.username" name="username" class="input fz32" type="text" maxlength="11" placeholder="请输入用户名" />
          </view>
          <view class="item pr">
            <sw-icons class="icons" icon="icon-mima" size="50" color="#008afe"></sw-icons>

            <sw-icons v-if="!state.showPassword1" class="icons mima" icon="icon-yanjing-guan" size="46" color="#333" @click="state.showPassword1 = !state.showPassword1"></sw-icons>
            <sw-icons v-else class="icons mima" icon="icon-yanjing-kai" size="46" color="#333" @click="state.showPassword1 = !state.showPassword1"></sw-icons>
            <input v-if="state.showPassword1" v-model="state.formData.oldpassword" name="oldpassword" class="input fz32" type="text" maxlength="20" placeholder="请输入原密码" />
            <input v-else v-model="state.formData.oldpassword" name="oldpassword" class="input fz32" type="password" maxlength="20" placeholder="请输入原密码" />
          </view>
          <view class="item pr">
            <sw-icons class="icons" icon="icon-mima" size="50" color="#008afe"></sw-icons>

            <sw-icons v-if="!state.showPassword2" class="icons mima" icon="icon-yanjing-guan" size="46" color="#333" @click="state.showPassword2 = !state.showPassword2"></sw-icons>
            <sw-icons v-else class="icons mima" icon="icon-yanjing-kai" size="46" color="#333" @click="state.showPassword2 = !state.showPassword2"></sw-icons>
            <input v-if="state.showPassword2" v-model="state.formData.password" name="password" class="input fz32" type="text" maxlength="20" placeholder="请输入新密码" />
            <input v-else v-model="state.formData.password" name="password" class="input fz32" type="password" maxlength="20" placeholder="请输入新密码" />
          </view>
          <view class="item pr">
            <sw-icons class="icons" icon="icon-mima" size="50" color="#008afe"></sw-icons>

            <sw-icons v-if="!state.showPassword3" class="icons mima" icon="icon-yanjing-guan" size="46" color="#333" @click="state.showPassword3 = !state.showPassword3"></sw-icons>
            <sw-icons v-else class="icons mima" icon="icon-yanjing-kai" size="46" color="#333" @click="state.showPassword3 = !state.showPassword3"></sw-icons>
            <input
              v-if="state.showPassword3"
              v-model="state.formData.confirmpassword"
              name="confirmpassword"
              class="input fz32"
              type="text"
              maxlength="20"
              placeholder="确认新密码"
            />
            <input v-else v-model="state.formData.confirmpassword" name="confirmpassword" class="input fz32" type="password" maxlength="20" placeholder="确认新密码" />
          </view>
        </view>
        <view class="btn-box"><button class="btn main-bgColor fff" form-type="submit" :disabled="state.isSend">确认</button></view>
      </form>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { updatePassword } from '@/common/js/getData.js';

const { proxy } = getCurrentInstance();

const formRef = ref(null);

const state = reactive({
  isSend: false,
  showPassword1: false,
  showPassword2: false,
  showPassword3: false,
  // 表单数据
  formData: {
    username: '',
    oldpassword: '',
    password: '',
    confirmpassword: ''
  }
});

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  state.formData.username = getApp().globalData.username.username;
});

// 提交
const formSubmit = e => {
  const formdata = e.detail.value;
  if (state.isSend) return;
  const reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/; // 密码
  if (!formdata.username) {
    uni.showToast({
      icon: 'none',
      title: '请输入用户名'
    });
    return;
  }
  if (!formdata.oldpassword) {
    uni.showToast({
      icon: 'none',
      title: '请输入原密码'
    });
    return;
  }
  if (!formdata.password) {
    uni.showToast({
      icon: 'none',
      title: '请输入新密码'
    });
    return;
  }
  if (!(reg.test(formdata.password) && formdata.password.length >= 8)) {
    uni.showToast({
      icon: 'none',
      title: '密码最少8位，并且包含大小写字母，数字，特殊符号'
    });
    return;
  }
  if (!formdata.confirmpassword) {
    uni.showToast({
      icon: 'none',
      title: '请输入确认新密码'
    });
    return;
  }
  if (formdata.password != formdata.confirmpassword) {
    uni.showToast({
      icon: 'none',
      title: '两次密码不一致'
    });
    return;
  }

  state.isSend = true;
  updatePassword(state.formData)
    .then(res => {
      uni.showToast({
        title: res.message,
        mask: true
      });
      uni.removeStorage({ key: 'token' });
      setTimeout(() => {
        proxy.$jump.reLaunch('/pages/account/login');
      }, 1000);
    })
    .finally(() => {
      state.isSend = false;
    });
};
</script>

<style lang="less" scoped>
@import url('@/common/less/common.less');

.content {
  height: 100vh;
}

.form {
  position: relative;
  top: 50%;
  padding: 60rpx 80rpx 0;
  transform: translateY(-60%);

  .title {
    margin-bottom: 160rpx;
  }

  .item {
    line-height: 100rpx;
    padding: 30rpx 0;
    border-bottom: 2rpx solid @main-theme-color;
    .input {
      padding: 0 120rpx;
      height: 40rpx;
      line-height: 40rpx;
    }
    .icons {
      position: absolute;
      left: 25rpx;
      line-height: 1;
    }
    .mima {
      left: auto;
      right: 25rpx;
    }
  }

  .btn {
    margin-top: 120rpx;
  }
}
</style>
